<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 网站用户 iframe 框</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/Font-Awesome-master/css/font-awesome.min.css">
    <script src="/js/jquery-2.1.1.min.js"></script>
    <script src="/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
    <style>
        .grid {
            padding: 4px;
        }
        .grid li {
            width: 28px;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
            border: 1px solid #e6e6e6;
            border-top-color: rgb(230, 230, 230);
            border-right-color: rgb(230, 230, 230);
            border-bottom-color: rgb(230, 230, 230);
            border-left-color: rgb(230, 230, 230);
            margin: 4px;
            text-align: center;
            border-radius: 1px;
            -webkit-transition: all .4s ease;
            transition: all .4s ease;
            float: left;
            list-style: none;
        }
        .grid li:hover {
            background: #1E9FFF;
            color: #fff;
            border-color: #1E9FFF;
        }
        .sizing {
            display: none;
            position: absolute;
            left: 0;
            top: 37px;
            width: 100%;
            background: #fff;
            border: 1px solid #D2D2D2;
            border-radius: 0 0 2px 2px;
            box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
            height: 246px;
            overflow: auto;
            z-index: 10;
        }
        .icon_search {
            margin: 8px 8px 0;
        }
        .edui-default .edui-editor{
            z-index: 0 !important;
        }
        .js_div{
            border: 1px solid #d7d7d7;
            padding:5px;
            float: left;
            height:230px;
            margin-right: 5px;
        }
        .js_center{
            text-align: center;
            max-width: 150px;

        }
        .js_image{
            height: 150px;
        }
        .js_image,.js_image img{
            max-width: 150px;
        }
        .js_line{
            line-height: 40px;
        }
        .js_image img{
            display: block;
            margin: 0 auto;
            max-height: 150px;
        }
        #juese{
            margin-left: 20px;
        }
        .images{
            max-width: 200px;
            max-height: 200px;
        }
    </style>
    {block name="css"}
    {/block}
</head>
<body>

<div class="layui-form" style="padding: 20px 0 0 0;">
    <input type="hidden" name="id" value="{$data.id}">
    <div class="layui-form-item">
        <label class="layui-form-label">剧本名称</label>
        <div class="layui-input-inline">
            <input type="text" disabled value="{$data.name}" lay-verify="required" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">几人本</label>
        <div class="layui-input-inline" style="width: 60%;">
            男
            <input disabled style="display: inline-block;width: 10%;" type="text" style="width:50px;" lay-verify="required" autocomplete="off"
                   class="layui-input" value="{$data.sex_m}">
            女
            <input disabled style="display: inline-block;width: 10%;" type="text" lay-verify="required" autocomplete="off"
                   class="layui-input" value="{$data.sex_f}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">难度</label>
        <div class="layui-input-inline">
            <select id="select_script_setting_nd_id" lay-filter="script_setting_nd_id" lay-verify="required" >
                <option disabled value="">请选择</option>
                {foreach $script_setting_nd as $k=>$v}
                <option disabled value="{$v.id}" {if $data.script_setting_nd_id == $v.id} selected {/if}>{$v.name}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-inline">
            <input type="text" disabled lay-verify="required" autocomplete="off"
                   class="layui-input" value="{$data.price}" style="width: 80%;display: inline-block">元/位
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">剧本形式</label>
        <div class="layui-input-inline">
            <select id="select_script_setting_xs_id"  lay-filter="script_setting_xs_id" lay-verify="required" >
                <option disabled value="">请选择</option>
                {foreach $script_setting_xs as $k=>$v}
                <option disabled value="{$v.id}" {if $data.script_setting_xs_id == $v.id} selected {/if}>{$v.name}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">单局时长</label>
        <div class="layui-input-inline">
            <input type="text" disabled value="{$data.time}" lay-verify="required" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label width">类型</label>
        <div class="layui-input-block">
            {foreach $script_class as $k=>$v}
            <input disabled type="checkbox" name="script_class[]" title="{$v.name}" value="{$v.id}" lay-skin="primary"
                   {foreach $data.script_class as $kk=>$vv}
            {if $vv.script_setting.id == $v.id}
            checked
            {/if}
            {/foreach}
            >
            {/foreach}
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">剧本封面图</label>
        <div class="layui-input-inline">
            <img style="max-width: 200px;" src="{$data.image}" alt="">
        </div>
    </div>
    <div class="layui-upload" >
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            剧本轮播图：
            <div class="layui-upload-list" id="images_demo_images">
                {foreach $data.images as $k=>$v}
                <div style="float:left;width:200px;height:200px;margin:10px;padding-bottom:35px;text-align:center;">
                    <img src="{$v}" alt="" class="layui-upload-img images">
                </div>
                {/foreach}
            </div>
            <div style="clear:both;"></div>
        </blockquote>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div>
            <div style="float: left;" id="js_div">
                {foreach $data.script_role as $k=>$v}
                <div class="js_div" id="js_div_{$v.id}">
                    <input type="hidden" name="role[]">
                    <div class="js_image"><img src="{$v.image}" alt=""></div>
                    <div class="js_center js_line">{$v.name}</div>
                    <div class="js_center">
<!--                        <button type="button"  class="layui-btn js_update" date-id="{$v.id}" >编辑</button>-->
<!--                        <button type="button"  class="layui-btn js_delete" date-id="{$v.id}">删除</button>-->
                    </div>
                </div>
                {/foreach}
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">剧本介绍</label>
        <div class="layui-input-inline" style="width: 70%;">
            <script id="content_content"  type="text/plain">{$data.content|raw}</script>
            <textarea name="content" id="content_val_content" style="display: none;">{$data.content}</textarea>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
    </div>
</div>

<script>

    layui.config({
        base: '/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'upload','layer'], function () {
        var $ = layui.$
            , form = layui.form
            , upload = layui.upload;
        $(".delete_j").on('click',function(){
            $(this).closest('div').remove();
        })
        $(".js_delete").click(function(){
            var id = $(this).attr('date-id');
            $(this).closest('.js_div').remove();
            $.ajax({
                'url': "{:url('script_role/delete')}",
                'method': 'POST',
                'data': {id: id},
                'success': function (res) {
                    if (res.code == 200) {
                        layer.msg('删除成功', {
                            time: 1500 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {

                        });
                    } else {
                        layer.msg(res.message);
                    }
                }
            })

        })
        $(".js_update").click(function(){

            var id = $(this).attr('date-id');
            layer.open({
                type: 2 //此处以iframe举例
                ,title: '编辑角色'
                ,area: ['500px', '600px']
                ,shade: 0
                ,maxmin: true
                ,offset: []
                ,content: "{:url('script_role/upload')}" +'?id='+ id
                ,btn: ['取消', '确认'] //只是为了演示
                ,btn1: function(){
                    layer.closeAll();
                }
                ,btn2: function(index, layero){
                    var iframeWindow = window['layui-layer-iframe' + index]
                    var submitID = 'LAY-user-front-submit'
                    var submit = layero.find('iframe').contents().find('#' + submitID);
                    //监听提交
                    iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                        var field = data.field; //获取提交的字段
                        $.ajax({
                            'url': "{:url('script_role/upload_ajax')}",
                            'method': 'POST',
                            'data': field,
                            'success': function (res) {
                                if (res.code == 200) {
                                    layer.msg('修改成功', {
                                        time: 1500 //2秒关闭（如果不配置，默认是3秒）
                                    }, function () {
                                    });
                                } else {
                                    layer.msg(res.message);
                                }
                            }
                        });
                        $("#js_div_"+id).find('img').attr('src',field.image);
                        $("#js_div_"+id).find('.js_line').html(field.name);
                        layer.close(index); //关闭弹层
                    });
                    submit.trigger('click');
                    return false;
                }

                ,zIndex: layer.zIndex //重点1
                ,success: function(layero){
                    layer.setTop(layero); //重点2
                }
            });
        })
        $("#juese").click(function(){
            layer.open({
                type: 2 //此处以iframe举例
                ,title: '添加角色'
                ,area: ['500px', '500px']
                ,shade: 0
                ,maxmin: true
                ,offset: []
                ,content: "{:url('script_role/add')}"
                ,btn: ['取消', '确认'] //只是为了演示
                ,btn1: function(){
                    layer.closeAll();
                }
                ,btn2: function(index, layero){
                    var iframeWindow = window['layui-layer-iframe' + index]
                    var submitID = 'LAY-user-front-submit'
                    var submit = layero.find('iframe').contents().find('#' + submitID);
                    //监听提交
                    iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                        var field = data.field; //获取提交的字段
                        console.log(field,9999)
                        $.ajax({
                            url:"{:url('script_role/add_ajax')}",
                            data:field,
                            method: 'POST',
                            success:function(res){
                                var num_id = parseInt(Math.random()*(99999-10000+1)+10000,10)
                                var html = '<div id="'+num_id+'" class="js_div">\n' +
                                    '                    <div class="js_image"><img src="'+field.image+'" alt=""></div>\n' +
                                    '                    <div class="js_center js_line">'+field.name+'</div>\n' +
                                    '                    <input type="hidden" name="role[]" value="'+res.data+'">\n'+
                                    '                    <div class="js_center data-button">\n' +
                                    '                        <button type="button"  class="layui-btn js_update" data-id="'+res.data+'" id="js_update_'+res.data+'">编辑</button>\n' +
                                    '                        <button type="button"  class="layui-btn" id="js_delete_'+res.data+'">删除</button>\n' +
                                    '                    </div>\n' +
                                    '                </div>';
                                $("#js_div").append(html);
                                console.log(num_id,11);
                                $("#js_delete_"+res.data).click(function(){
                                    $(this).closest('.js_div').remove();
                                })
                                $("#js_update_"+res.data).click(function(){
                                    console.log(num_id,123456);
                                    var id = $("#js_update_"+res.data).attr('data-id');
                                    layer.open({
                                        type: 2 //此处以iframe举例
                                        ,title: '编辑角色'
                                        ,area: ['500px', '500px']
                                        ,shade: 0
                                        ,maxmin: true
                                        ,offset: []
                                        ,content: "{:url('script_role/upload')}" +'?id='+ id
                                        ,btn: ['取消', '确认'] //只是为了演示
                                        ,btn1: function(){
                                            layer.closeAll();
                                        }
                                        ,btn2: function(index, layero){
                                            console.log(num_id,222);
                                            var iframeWindow = window['layui-layer-iframe' + index]
                                            var submitID = 'LAY-user-front-submit'
                                            var submit = layero.find('iframe').contents().find('#' + submitID);
                                            //监听提交
                                            iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                                                var field = data.field; //获取提交的字段
                                                $.ajax({
                                                    'url': "{:url('script_role/upload_ajax')}",
                                                    'method': 'POST',
                                                    'data': field,
                                                    'success': function (res) {
                                                        if (res.code == 200) {
                                                            layer.msg('修改成功', {
                                                                time: 1500 //2秒关闭（如果不配置，默认是3秒）
                                                            }, function () {
                                                            });
                                                        } else {
                                                            layer.msg(res.message);
                                                        }
                                                    }
                                                });
                                                $("#"+num_id).find('img').attr('src',field.image);
                                                $("#"+num_id).find('.js_line').html(field.name);
                                                layer.close(index); //关闭弹层
                                            });
                                            submit.trigger('click');
                                            return false;
                                        }

                                        ,zIndex: layer.zIndex //重点1
                                        ,success: function(layero){
                                            layer.setTop(layero); //重点2
                                        }
                                    });
                                })
                                layer.close(index); //关闭弹层
                            }

                        })
                    });
                    submit.trigger('click');
                    return false;
                }

                ,zIndex: layer.zIndex //重点1
                ,success: function(layero){
                    layer.setTop(layero); //重点2
                }
            });
        })
        upload.render({
            elem: '#layuiadmin-upload-image'
            , url: "{:url('file_y')}"
            , accept: 'images'
            , method: 'post'
            , acceptMime: 'image/*'
            , done: function (res) {
                if(res.code == 200){
                    layer.msg('上传成功');
                    console.log(res.data);
                    $(this.item).prev("div").children("input").val(res.data.file)
                }else{
                    layer.msg(res.message);
                }
            }
        });
        upload.render({
            elem: '#images_images'
            ,url: "{:url('file_y')}" //改成您自己的上传接口
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                // obj.preview(function(index, file, result){
                //     $('#images_demo_images').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img images">')
                // });
            }
            ,done: function(res){
                // $('#images_demo_images').append('<input type="hidden" value="'+res.data.file+'" name="images[]">');
                $('#images_demo_images').append('<div style="float:left;width:200px;height:200px;margin:10px;padding-bottom:30px;text-align:center;" id="td_'+res.data.id+'"><img src="'+ res.data.file +'" alt="" class="layui-upload-img images"><button type="button" class="layui-btn layui-btn-primary delete">删除</button><input type="hidden" value="'+res.data.file+'" name="'+"images[]"+'"></div>')

                $("#td_"+res.data.id).find('button').on('click',function(){
                    $(this).closest('div').remove();
                })
            }
        });
        //自定义验证
        form.verify({
            nickname: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }
            ,fd_number:[/^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,'只支持2位小数的数字']
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]

            //确认密码
            ,repass: function(value){
                if(value !== $('#LAY_password').val()){
                    return '两次密码输入不一致';
                }
            }
        });
        $('body').on('keyup', '.icon_search_input', function(){
            var keyword  = $.trim($(this).val());
            if (!keyword) {
                $(this).closest('.icon_select_options').find('li').show();
            } else {
                $(this).closest('.icon_select_options').find('li').each(function(){
                    var className = $(this).find('i').attr('class');
                    if (className.indexOf(keyword) >=0) {
                        $(this).show()
                    } else {
                        $(this).hide()
                    }
                })
            }
        })

    })
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="/plug/UEditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/plug/UEditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">

    UE.getEditor('content_content',{
        initialFrameHeight:400,
        readonly : true
    }).ready(function() {
        UE.getEditor('content_content').addListener('contentChange',function(){
            var html = UE.getEditor('content_content').getContent();
            $("#content_val_content").val(html);
        })
    });
</script>
</body>
</html>